<template>
	<div class="forgetbox">
		<h3>重置密码</h3>
		<form action="">
			<input class="text phone" type="text" placeholder="请输入手机号" v-model.lazy="phone">
			<p :class="{checkf:no[0],checkt:yes[0]}">{{errorMessage.phone}}</p>
			<input class="text email" type="text" placeholder="请输入QQ邮箱" v-model.lazy="email">
			<p :class="{checkf:no[1],checkt:yes[1]}">{{errorMessage.email}}</p>
			<input class="text pwd" type="password" placeholder="请输入新密码" v-model.lazy="pwd">
			<p :class="{checkf:no[2],checkt:yes[2]}">{{errorMessage.pwd}}</p>
			<input class="text pwd" type="password" placeholder="请确认新密码" v-model.lazy="pwd2">
			<p :class="{checkf:no[3],checkt:yes[3]}">{{errorMessage.pwd2}}</p>
			<div class="btn">
				<input @click="confirmbtn" class="confirm" type="button" value="确认">
				<input @click="resetbtn" class="reset" type="button" value="清空">
			</div>
		</form>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		getCurrentInstance
	} from "vue"

	let phone = ref(""),
		email = ref(""),
		pwd = ref(""),
		pwd2 = ref("");

	// 错误信息提示
	let errorMessage = reactive({
		phone: "",
		email: `邮箱格式为QQ邮箱`,
		pwd: "密码长度为8-16位字符，字符必须包含英文字母、数字、和特殊字符@$!%*#?&",
		pwd2: ""
	});

	// 错误信息提示样式设置
	let yes = reactive([false, false, false, false])
	let no = reactive([false, false, false, false])

	let flag = ref(false)
	var phone_reg = /^1[3|4|5|7|8|9]\d{9}$/, //手机号正则验证
		email_reg = /^[1-9][0-9]{4,10}@qq.com$/, //邮箱正则验证
		pwd_reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/ //密码正则验证
	watch(phone, (newvalue, oldvalue) => {
		if (phone_reg.test(newvalue)) {
			errorMessage.phone = "手机号格式通过！"
			flag.value = true
			yes[0] = true
			no[0] = false
		} else {
			errorMessage.phone = "请输入正确的11位手机号！"
			flag.value = false
			no[0] = true
			yes[0] = false
		}
	})
	watch(email, (newvalue, oldvalue) => {
		if (email_reg.test(newvalue)) {
			errorMessage.email = "邮箱格式通过！"
			flag.value = true
			yes[1] = true
			no[1] = false
		} else {
			errorMessage.email = "邮箱格式错误！"
			flag.value = false
			yes[1] = false
			no[1] = true
		}
	})
	watch(pwd, (newvalue, oldvalue) => {
		if (pwd_reg.test(newvalue)) {
			errorMessage.pwd = "密码格式通过！"
			flag.value = true
			yes[2] = true
			no[2] = false
		} else {
			errorMessage.pwd = "密码格式错误！请输入8-16位字符：包含英文字母、数字、和特殊字符@$!%*#?&"
			flag.value = false
			no[2] = true
			yes[2] = false
		}
	})
	watch(pwd2, (newvalue, oldvalue) => {
		if (pwd_reg.test(newvalue) && newvalue == pwd.value) {
			errorMessage.pwd2 = "确认密码通过！"
			flag.value = true
			yes[3] = true
			no[3] = false
		} else {
			errorMessage.pwd2 = "确认密码与设置密码不一致！"
			flag.value = false
			no[3] = true
			yes[3] = false
		}
	})

	// phone_reg.test(phone)&&email_reg.test(email)&&pwd_reg.test(pwd)&&pwd2 == pwd
	let {
		proxy
	} = getCurrentInstance()
	async function confirmbtn() { //点击注册
		if (phone.value == "" || email.value == "" || pwd.value == "" || pwd2.value == "") {
			alert("输入内容并不能为空！")
			// console.log(flag, 1111)
		} else {
			if (flag.value == true) { //网络请求
				let fdata = new FormData()
				fdata.append("phone", phone.value)
				fdata.append("email", email.value)
				fdata.append("pwd", pwd.value)
				let res = await proxy.$axios.post('/forget', fdata)
				console.log(res);
				if (res.data.code == 2003) {
					alert(res.data.info)
					proxy.$router.push("/cll/login")
				} else if (res.data.code == 4005) {
					alert(res.data.info)
				}
			} else if (flag.value == false) {
				alert("格式有误！请检查格式是否符合要求")
				// console.log(flag, 3333)
			}
		}
	}

	function resetbtn() { //清空账号信息
		phone.value = "";
		email.value = "";
		pwd.value = "";
		pwd2.value = "";
	}
</script>

<style scoped lang="scss">
	.forgetbox {
		width: 600px;
		height: 550px;
		border-radius: 24px;
		background-color: rgb(200, 150, 194);
		font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
		position: absolute;
		top: 220px;
		padding-top: 20px;

		h3 {
			font-size: 34px;
			font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
			text-align: center;
			font-weight: 500;

		}

		form {
			width: 480px;
			height: 450px;
			padding-top: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			margin: auto;

			p {
				font-size: 12px;
				text-align: center;
				color: gray;
			}

			.checkf {
				color: crimson;
			}

			.checkt {
				color: forestgreen;
			}

			input {
				border: none;
				outline: none;
			}

			.text {
				box-sizing: border-box;
				height: 56px;
				width: 480px;
				border: 1px solid #ddd;
				border-radius: 28px;
				line-height: 26px;
				font-size: 18px;
				color: #333;
				padding: 14px 20px;
				font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
			}

			input:focus {
				border-color: rgb(255, 183, 231);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgb(255, 183, 231);
			}

			.btn {
				margin: 0 auto;
				width: 450px;
				display: flex;
				justify-content: space-between;
				height: 56px;

				a,
				input {
					text-align: center;
					width: 200px;
					border-radius: 28px;
					line-height: 56px;
					font-size: 24px;
					color: #fff;
					font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft Yahei", "微软雅黑";
					background-color: rgb(255, 150, 231);
					cursor: pointer;

					&:hover {
						background: rgb(255, 183, 231);
					}
				}

			}
		}
	}
</style>
